import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import {NavBar,Icon,Popover,Card,WhiteSpace} from 'antd-mobile';
import './Detail.less';
const Item = Popover.Item;
const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;
class Detail extends Component{
    state = {
        visible: false,
        selected: '',
    };
    render(){
        return(
            <div className="page-detail">
            <NavBar style={{background:'#B01615',color:'#FFF',boxShadow:'0 0 0.25rem rgba(0,0,0,.4)'}}
                mode="dark"
                icon={<Icon type="left" />}
                onLeftClick={() => this.props.history.goBack()}
                rightContent={[
                    <Popover mask
                        overlayClassName="fortest"
                        overlayStyle={{ color: 'currentColor' }}
                        visible={this.state.visible}
                        overlay={[
                        (<Item key="4" value="scan" icon={myImg('tOtXhkIWzwotgGSeptou')} data-seed="logId">Scan</Item>),
                        (<Item key="5" value="special" icon={myImg('PKAgAqZWJVNwKsAJSmXd')} style={{ whiteSpace: 'nowrap' }}>My Qrcode</Item>),
                        (<Item key="6" value="button ct" icon={myImg('uQIYTFeRrjPELImDRrPt')}>
                            <span style={{ marginRight: 5 }}>Help</span>
                        </Item>),
                        ]}
                        align={{
                        overflow: { adjustY: 0, adjustX: 0 },
                        offset: [-10, 0],
                        }}
                        onVisibleChange={this.handleVisibleChange}
                        onSelect={this.onSelect}
                    >
                        <div style={{
                        height: '100%',
                        padding: '0 15px',
                        marginRight: '-15px',
                        display: 'flex',
                        alignItems: 'center',
                        }}
                        >
                        <Icon type="ellipsis" />
                        </div>
                    </Popover>
                ]}
                >手机网站·新闻
            </NavBar>

            <section className="detail-content">
                <h1 className="detail-title">
                麒麟980加持 华为Mate 20不输iPhone XS
                </h1>
                <p className="detail-info">
                <span className="text-icon">原创</span>
                <span>2018-10-04 19:31&nbsp;&nbsp;&nbsp;陈思学</span>
                <span className="text-icon">抢沙发</span>
                </p>
                <p className="detail-artical">
                【手机新闻】作为全新的7nm芯片，麒麟980处理器一经问世便获得众多关注，而这款芯片也多次被人拿来与的A12仿生芯片相比较。近日知名分析师郭明錤发布了一份关于安卓手机的报告，报告指出的麒麟980芯片组正在缩小华为与苹果在用户体验方面的差距，看来今年的 20应该是一款值得期待的旗舰手机。
                </p>

            </section>

            <section className="detail-share">

            </section>

            <Card className="detail-comment">
                <Card.Header
                    title="网友评论"
                />
                <Card.Body>
                    <div>评论区域</div>
                </Card.Body>
            </Card>
            <WhiteSpace size="lg" />
            <Card className="detail-recommen">
                <Card.Header
                    title="热门推荐"
                />
                <Card.Body>
                    <div>推荐区域</div>
                </Card.Body>
            </Card>
            </div>
        )
    }
}
export default Detail;